<template>
  <div>
    <el-card class="cards" shadow="never">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input v-model="businessFrom.taskCode" class="inputs" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工单状态：" prop="renyuan">
          <el-select v-model="businessFrom.status" placeholder="请选择">
            <el-option label="代办" value="1" />
            <el-option label="进行" value="2" />
            <el-option label="取消" value="3" />
            <el-option label="完成" value="4" />
          </el-select>
        </el-form-item>
        <el-button class="inquireInput" icon="el-icon-search" @click="queryParameters">查询</el-button>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button icon="el-icon-circle-plus-outline" class="button1" size="mini" @click="addWorkOrders">新建</el-button>
      <el-button class="button2" size="mini" @click="addgongdan">工单配置</el-button>
      <el-table :data="getbusinessList" style="width: 100%">
        <el-table-column label="序号" type="index" />
        <el-table-column prop="taskCode" label="工单编号" />
        <el-table-column prop="innerCode" label="设备编号" />
        <el-table-column prop="taskType.typeName" label="工单类型" />
        <el-table-column prop="taskType.typeName" label="工单方式">手动</el-table-column>
        <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" />
        <el-table-column prop="userName" label="运营人员" />
        <el-table-column prop="createTime" label="创建日期" />
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-link type="primary" @click="detaWorkOrders(scope.row.taskId)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :current-page="businessFrom.pageIndex"
        :page-size="businessFrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="367"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <!-- 查看详情对话框  取消-->

    <el-dialog title="工单详情" :visible.sync="detaildialogVisible" width="40%">
      <div class="daiban">
        <img src="../../assets/avatar.png" alt="" class="daibanimg">
        <div class="text">取消哦～～</div>
      </div>
      <el-row>
        <el-col :span="12" class="rowbox1">
          <div> <span>设备编号:</span> {{ detail.innerCode }} </div>
          <div> <span>运营人员:</span> {{ detail.userName }}</div>
          <div> <span>补货数量:</span>   <el-link type="primary" @click="replenishmentDetailsBtn">补货详情</el-link></div>
          <div> <span>备注:</span> </div>
        </el-col>
        <el-col :span="12" class="rowbox1">
          <div> <span>创建日期:</span>{{ detail.createTime }}</div>
          <div> <span>工单类型:</span>{{ detail.typeName }}</div>
          <div> <span>工单方式:</span>{{ detail.manner }}</div>
          <div> <span>取消原因:</span>{{ detail.desc }}</div>
        </el-col>
      </el-row>
      <el-button style="margin-left:250px; background-color: #f1e7e2;" size="small" @click="recreate">重新创建</el-button>
    </el-dialog>
    <!-- 查看详情对话框  完成-->

    <el-dialog title="工单详情" :visible.sync="finishdetaildialogVisible" width="40%">
      <div class="daiban">
        <img src="../../assets/avatar.png" alt="" class="daibanimg">
        <div class="text">完成辣！～～</div>
      </div>
      <el-row>
        <el-col :span="12" class="rowbox1">
          <div> <span>设备编号:</span> {{ detail.innerCode }} </div>
          <div> <span>运营人员:</span> {{ detail.userName }}</div>
          <div> <span>补货数量:</span>   <el-link type="primary" @click="replenishmentDetailsBtn">补货详情</el-link></div>
          <div> <span>备注:</span> </div>
        </el-col>
        <el-col :span="12" class="rowbox1">
          <div> <span>创建日期:</span>{{ detail.createTime }}</div>
          <div> <span>工单类型:</span>{{ detail.typeName }}</div>
          <div> <span>工单方式:</span>{{ detail.manner }}</div>
          <div> <span>取消原因:</span>{{ detail.desc }}</div>
        </el-col>
      </el-row>

    </el-dialog>
    <!-- 查看详情对话框  代办-->

    <el-dialog title="工单详情" :visible.sync="agentdialogVisible" width="40%">
      <div class="daiban">
        <img src="../../assets/avatar.png" alt="" class="daibanimg">
        <div class="text">还有代办哦～～</div>
      </div>
      <el-row>
        <el-col :span="12" class="rowbox1">
          <div> <span>设备编号:</span> {{ detail.innerCode }} </div>
          <div> <span>运营人员:</span> {{ detail.userName }}</div>
          <div> <span>补货数量:</span>   <el-link type="primary" @click="replenishmentDetailsBtn">补货详情</el-link></div>
          <div> <span>备注:</span> </div>
        </el-col>
        <el-col :span="12" class="rowbox1">
          <div> <span>创建日期:</span>{{ detail.createTime }}</div>
          <div> <span>工单类型:</span>{{ detail.typeName }}</div>
          <div> <span>工单方式:</span>{{ detail.manner }}</div>
          <div> <span>取消原因:</span>{{ detail.desc }}</div>
        </el-col>
      </el-row>
      <el-button style="margin-left:250px; background-color: #f1e7e2;" size="small" @click="cancelATicket">取消工单</el-button>
    </el-dialog>

    <!-- 添加工单 -->
    <el-dialog title="新增工单" :visible.sync="adddialogVisible" width="40%" @close="addClose">
      <el-form ref="ruleForm" :model="adddetail" :rules="addrules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="设备编号：" prop="innerCode">
          <el-input v-model="adddetail.innerCode" placeholder="请输入" @change="deviceNumber" />
        </el-form-item>
        <el-form-item label="工单类型：" prop="productType">
          <el-select v-model.number="adddetail.productType" placeholder="请选择">
            <el-option label="补货清单" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="补货数量：" prop="primary">
          <el-link type="primary" @click="replenishmentListbtn"> <i class="el-icon-tickets" /> 补货清单</el-link>
        </el-form-item>
        <el-form-item label="运营人员" prop="userId">
          <el-select v-model="adddetail.assignorId" placeholder="请选择">
            <el-option v-for="(item) in listOfPeopleList " :key="item.userId" :label="item.userName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注:" prop="desc">
          <el-input v-model="adddetail.desc" type="textarea" placeholder="请输入备注（不超过40个字）" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAFormList ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 补货警戒线 -->
    <el-dialog title="工单配置" :visible.sync="replenishment" width="30%">
      <el-input-number v-model="num" controls-position="right" :min="1" :max="100" @input="handleChange" />
      <span slot="footer" class="dialog-footer">
        <el-button class="input1" @click="replenishment = false">取 消</el-button>
        <el-button class="input2" type="primary" @click="replenishment = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 补货清单渠道详情对话框 -->
    <el-dialog
      title="补货详情"
      :visible.sync="replenishmentListdialog"
      width="40%"
    >
      <el-table
        :data="replenishmentList"
        style="width: 100%"
        height="300"
      >
        <el-table-column
          prop="channelCode"
          label="渠道编号"
        />
        <el-table-column
          prop="sku.brandName"
          label="商品名称"
        />
        <el-table-column
          prop="currentCapacity"
          label="当前数量"
        />
        <el-table-column
          prop="canBeAdded"
          label="还可添加"
        />
        <el-table-column
          prop="canBeAdded"
          label="补货数量"
        >
          <el-input-number v-model="replenishmentNum" controls-position="right" :min="1" :max="10" @input="handleChange" />
        </el-table-column>
      </el-table>
      <span slot="footer" class="replenishmentList">
        <el-button @click="replenishmentListdialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmTheAddition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 补货详情对话框 -->

    <el-dialog
      title="补货详情"
      :visible.sync="replenishmentDetailsdialog"
      width="40%"
    >
      <el-table
        :data="replenishmentDetails"
        style="width: 100%"
        height="250"
      >
        <el-table-column
          prop="channelCode"
          label="渠道编号"
        />
        <el-table-column
          prop="skuName"
          label="商品"
        />
        <el-table-column
          prop="expectCapacity"
          label="补货数量"
        />
      </el-table>
      <span slot="footer" class="footer">
        <el-button @click="replenishmentDetailsdialog = false">取 消</el-button>
        <el-button type="primary" @click="replenishmentDetailsdialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// ticketDetails
import { ticketSearchAPI, ticketDetails, listOfPeopleAPI, replenishmentListAPI, CreateATicketAPI, replenishmentDetailsAPI, cancelATicketAPI } from '@/api/workOrders'
export default {
  data() {
    return {
      // 初始数据
      getbusinessList: [],
      businessFrom: {
        // 初始页码值
        pageIndex: 1,
        // 默认显示条数
        pageSize: 10,
        // 工单状态
        status: '',
        isRepair: true,
        taskCode: ''
      },
      num: 60,
      // 页码数量
      totalCount: 0,
      detaildialogVisible: false,
      // 添加对话框
      adddialogVisible: false,

      // 补货警戒线
      replenishment: false,
      // 补货详情对话框
      replenishmentDetailsdialog: false,
      // 成功详情对话框
      finishdetaildialogVisible: false,
      // 代办详情对话框
      agentdialogVisible: false,
      // 工单详情
      detail: {
        // 设备编号:
        innerCode: '',
        // 创建日期
        createTime: '',
        // 运营人员
        userName: null,
        // 补货数量
        // 标签---------
        // 备注
        // 工单类型
        taskType: '',
        // 工单方式
        manner: '手动',
        // 工单超时
        desc: '',
        // id
        taskId: '',
        userId: 1
      },
      // 添加工单
      adddetail: {
        // 创建类型
        createType: 1,
        // 设备编号
        innerCode: '',
        // 执行人Id 现在是人名字，后期渲染成 id
        userId: 1,
        assignorId: null,
        // 工单类型
        productType: null,
        // 描述信息
        desc: '',
        // 补货信息(补货工单才有)
        details: []
      },
      // 添加工单的验证
      addrules: {
        innerCode: [
          { required: true, message: '请输入设备编号', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请输入工单类型：', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '请输入人员', trigger: 'blur' }
        ]
      },
      time: '',
      // 设备编号请求人员
      listOfPeopleList: [],
      // 补货清单
      replenishmentList: [],
      // 补货清单渠道详情对话框按钮
      replenishmentListdialog: false,
      // 补货
      replenishmentNum: 10,
      // 补货详情页面
      replenishmentDetails: []
    }
  },
  created() {
    this.getticketSearchAPI()
  },
  methods: {

    async getticketSearchAPI() {
      const res = await ticketSearchAPI(this.businessFrom)
      this.getbusinessList = res.currentPageRecords
      // console.log(this.getbusinessList)
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      this.getbusinessList.forEach(item => {
        item.createTime = item.createTime.replace(/T/g, ':')
      })
    },
    // 查看详情
    async detaWorkOrders(taskId) {
      // 数据项目
      const res = await ticketDetails(taskId)
      this.detail.typeName = res.taskType.typeName
      this.detail.innerCode = res.innerCode
      this.detail.userName = res.userName
      this.detail.innerCode = res.innerCode
      this.detail.desc = res.desc
      this.time = res.createTime
      this.detail.taskStatus = res.taskStatus
      this.detail.createTime = this.time.replace(/T/g, ':')
      this.detail.taskId = res.taskId
      const prve = await replenishmentDetailsAPI(taskId)
      this.replenishmentDetails = prve
      console.log(this.replenishmentDetails)
      console.log(res)
      // 取消
      if (this.detail.taskStatus === 3) {
        this.detaildialogVisible = true
      }
      if (this.detail.taskStatus === 4) {
        this.finishdetaildialogVisible = true
      }
      if (this.detail.taskStatus === 1) {
        this.agentdialogVisible = true
      }
    },
    // 添加
    addWorkOrders() {
      this.adddialogVisible = true
    },
    addverification() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return
        this.adddialogVisible = false
      })
    },
    // 补货警戒线
    addgongdan() {
      this.replenishment = true
    },
    handleChange(value) {
      this.num = value
    },
    // 页码值
    handleSizeChange(newSize) {
      this.businessFrom.pageSize = newSize
      this.getticketSearchAPI()
    },
    handleCurrentChange(newNum) {
      this.businessFrom.pageIndex = newNum
      this.getticketSearchAPI()
    },
    queryParameters() {
      this.getticketSearchAPI()
    },
    // 设备编号请求人员
    async deviceNumber(value) {
      // 根据售货机获取运营人员列表
      const res = await listOfPeopleAPI(value)
      this.listOfPeopleList = res
      // 补货清单渠道详情
      const prve = await replenishmentListAPI(value)
      this.replenishmentList = prve
      // console.log(this.replenishmentList)
      this.replenishmentList.forEach(item => {
        item.canBeAdded = item.maxCapacity - item.currentCapacity
      }
      )
      // console.log(this.replenishmentList)
    },
    // 补货清单按钮
    replenishmentListbtn() {
      this.replenishmentListdialog = true
    },
    // 确定补货按钮，处理数据
    confirmTheAddition() {
      this.replenishmentList.forEach(item => {
        if (item.sku) {
          if (item.currentCapacity !== 10) {
            this.adddetail.details.push({
              channelCode: item.channelCode,
              expectCapacity: item.maxCapacity - item.currentCapacity,
              skuId: item.skuId,
              skuName: item.sku.skuName,
              skuImage: item.sku.skuImage
            })
          }
        }
        // 如果 他的max 不等于10 则添加那一项
        // maxCapacity  一共多少
        // currentCapacity  现在多少
      })
      console.log(this.adddetail.details)
      this.replenishmentListdialog = false
      // console.log(this.replenishmentList)
    },

    async addAFormList() {
      console.log(this.adddetail)
      const res = await CreateATicketAPI(this.adddetail)
      // console.log(res)
      this.$message.info(res)
      this.adddialogVisible = false
    },
    replenishmentDetailsBtn() {
      this.replenishmentDetailsdialog = true
    },
    // 重新创建
    recreate() {
      this.adddetail.innerCode = this.detail.innerCode
      this.adddetail.productType = 2
      this.adddialogVisible = true
    },
    // 取消工单
    async  cancelATicket() {
      const prve = await this.$confirm('取消工单后，将不能恢复，是否确认取消？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      const res = cancelATicketAPI({ desc: this.detail.desc, taskId: this.detail.taskId })
      this.getticketSearchAPI()
      console.log(res)
      this.agentdialogVisible = false
    },
    addClose() {
      this.$refs.ruleForm.resetFields()
      this.adddetail.details = []
    }
  }
}
</script>

<style lang="scss" scoped>
.cards {
  margin-bottom: 20px;
  height: 80px;
}

.inputs {
  width: 203px;
  height: 36px;
}

.button1 {
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: 0;
  color: #fff;
}

.button2 {
  background-color: #faf4f0;
  border: 0;
}

.el-table__header-wrapper {
  background-color: #f4f6fa;
}

.daiban {
  width: 430px;
  height: 50px;
  // background-color: red;
}

.el-dialog {
  border-radius: 10px !important;
}

.daiban {
  width: 170px;
  height: 58px;
  display: flex;
  justify-content: space-evenly;

  .daibanimg {
    width: 58px;
    height: 100%;
    border-radius: 50px;
  }

  .text {
    line-height: 58px;
    margin-left: 10px;
  }
}

.daibanBox {
  display: flex;
  justify-content: space-evenly;
  height: 100%;

  div {
    width: 33.33%;
  }
}

.rowbox1 {
  div {
    margin: 25px;
  }

  span {
    margin-right: 10px;
  }
}

.el-select {
  width: 100%;
}

.el-input-number {
  width: 100%;
}

.input1 {
  margin-right: 10px;
}

.input2 {
  margin-right: 140px;
}

.inquireInput {
  background-color: #6783f7;
  color: #fff;
  height: 40px;
  font-size: 16px;
}
.paginations{
  width: 100px !important;
  height: 100px !important;
  background-color: pink !important;
  .btn-prev{
    width: 30px !important;
  height: 20px !important;
  background-color: pink !important;
  }
}
.replenishmentList{
  .el-button {
    margin-bottom: 15px;
    margin-right: 130px;
  }

}

</style>
